DOM事件

在JavaScript中，DOM事件處理允許你與網頁的不同元素進行交互。事件可以是使用者的操作，如點擊、鍵盤輸入或滾動，還可以是來自瀏覽器的系統事件。通過處理這些事件，你可以創建交互式的網頁體驗。

什麼是事件？
事件 (Event) 是在網頁或瀏覽器中發生的操作或情況。例如：

• 點擊事件 (click)
• 鍵盤事件 (keydown, keyup)
• 鼠標事件 (mouseover, mouseout)
• 表單事件 (submit)
• 滾動事件 (scroll)
  每個DOM元素都有能力監聽事件，並根據用戶的操作做出響應。

事件處理器 (Event Handlers)

事件處理器是用來響應事件的函數，當事件發生時，這個函數會被執行。JavaScript 提供了多種方式來綁定事件處理器。

1. 使用HTML屬性
   最早期的方式是直接在HTML中添加事件屬性。這種方式現在已經不推薦使用了，它因為會混合HTML和JavaScript，不易維護。

<button onclick="alert('Button clicked!')">Click me</button>

2. DOM的onEvent
   可以使用DOM元素的onEvent來分配事件處理函數。例如，onclick用來處理點擊事件。這種方法比起直接在HTML中綁定要好，但仍有一些局限性，比如同一元素只能有一個處理器。

<button id="myButton">Click me</button>

<script>
  const button = document.getElementById('myButton');
  button.onclick = function() {
    alert('Button clicked!');
  };
</script>

3.addEventListener()
最現代且推薦的方式是使用addEventListener()方法來綁定事件處理器。它允許你給同一個元素綁定多個處理器，並且更具靈活性。除此之外，它也允許你在不修改HTML結構的情況下動態添加或移除事件。

事件對象 (Event Object)

每當事件觸發時，事件處理器會自動收到一個事件對象，該對象包含了有關事件的詳細信息，例如觸發事件的元素、事件類型、鼠標或鍵盤的具體行為等。

<button id="myButton">Click me</button>

<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', function(event) {
    console.log(event);  // 查看事件對象的內容
  });
</script>

訪問事件對象

事件處理器的第一個參數通常是事件對象，默認被命名為event或e。

<button id="myButton">Click me</button>

<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', function(event) {
    console.log(event);  // 查看事件對象的內容
  });
</script>

事件傳播 (Event Propagation)

DOM 事件可以通過三個階段傳播：

捕獲階段：從最外層的父元素向內傳遞。
目標階段：當事件到達目標元素時執行處理器。
冒泡階段：事件從目標元素向外傳遞，回到最外層。
事件傳播允許你控制事件如何影響父級或其他兄弟元素。

事件冒泡 (Event Bubbling)

當事件在冒泡階段傳播時，從目標元素開始，事件會逐層傳遞給其父系元素，直到到達根元素(document對象)。

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');

  parent.addEventListener('click', function() {
    alert('Parent clicked!');
  });

  child.addEventListener('click', function() {
    alert('Child clicked!');
  });
</script>

// 點擊按鈕時，會先觸發child的事件，然後冒泡到parent，依次觸發父級元素的事件處理器。

阻止冒泡

有些時候，如果我們不希望事件冒泡，可以使用event.stopPropagation()來阻止它繼續傳遞。

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');

  parent.addEventListener('click', function() {
    alert('Parent clicked!');
  });

  child.addEventListener('click', function(event) {
    event.stopPropagation();  // 阻止事件冒泡
    alert('Child clicked!');
  });
</script>

// 在這裡，點擊按鈕只會觸發child的處理器，不會冒泡到parent。

事件委託 (Event Delegation)

事件委託是一種優化事件處理的技術，它利用事件冒泡的特性，讓父級元素來處理其子元素的事件，這樣可以避免為每個子元素單獨綁定事件。

<div id="buttonContainer">
  <button class="btn">Button 1</button>
  <button class="btn">Button 2</button>
  <button class="btn">Button 3</button>
</div>

<script>
  const container = document.getElementById('buttonContainer');

  container.addEventListener('click', function(event) {
    if (event.target.classList.contains('btn')) {
      alert(event.target.textContent + ' clicked');
    }
  });
</script>

// 在這裡，我們為父級容器buttonContainer綁定了點擊事件，然後根據event.target來判斷哪個按鈕被點擊。